<template>
  <div class="container">
    <div>
      <span>医院</span>
    </div>
    <div class="level">
      <span>等级</span>
      <span
        @click="changeDegree(-1)"
        :class="formData.degree == -1 ? 'active' : ''"
        >全部</span
      >
      <span
        v-for="(item, index) in levelsArr"
        :key="index"
        :class="{ active: formData.degree == index }"
        @click="changeDegree(index)"
        >{{ item }}</span
      >
    </div>
    <div class="address">
      <span>地区</span>
      <span
        :class="formData.address == -1 ? 'active' : ''"
        @click="changeAddress(-1)"
        >全部</span
      >
      <span
        v-for="(item, index) in addressArr"
        :key="index"
        :class="{ active: formData.address == index }"
        @click="changeAddress(index)"
        >{{ item }}</span
      >
    </div>
    <el-table v-loading="loading" :data="tableData">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
    <card :data="formData" @pbtn="getChild"></card>

    兄弟传参 npm i mitt
    <son1></son1>
    <son2></son2>
    {{ txt }}
    <!-- {{ $filters.formatTaskName('12345678910') }} -->
  </div>
</template>
<script setup>
//拿到子传给父亲的值 并赋值给txt
const getChild = (value) => {
  txt.value = value;
  loading.value = true;
  console.log("页面更新");
  setTimeout(() => {
    loading.value = false;
  }, 2000);
};
import { onMounted, ref, reactive, nextTick } from "vue";
import { hospListApi } from "@/api/home.js";
import card from "./components/card.vue";
import son2 from "./components/son2.vue";
import son1 from "./components/son1.vue";

const levelsArr = ref(["三级甲等", "三级乙等", "二级甲等", "二级乙等", "一级"]);
const addressArr = ref([
  "拱墅区",
  "滨江区",
  "上城区",
  "西湖区",
  "下城区",
  "萧山区",
]);
const tableData = [
  {
    date: "2016-05-02",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-04",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-01",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
];
const getHospListApi = async () => {
  // const res = await hospListApi(1, 10);
  // console.log(res, "res1111");
};
let txt = ref("");
const loading = ref(false);
const formData = reactive({
  degree: localStorage.getItem("activelevel") || -1,
  address: localStorage.getItem("activeAddress") || -1,
});
onMounted(() => {
  getHospListApi();
});
const changeDegree = (index) => {
  formData.degree = index;
  localStorage.setItem("activeDegree", index);
};
const changeAddress = (index) => {
  formData.address = index;
  localStorage.setItem("activeAddress", index);
};
</script>
<style lang="less" scoped>
.active {
  color: #e49460;
}
.container {
  line-height: 2.3333rem;
  .level,
  .address {
    display: flex;
    color: #969696;
    span {
      margin-right: 0.9067rem;
      cursor: pointer;
    }
  }
}
</style>
